<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title> Job List</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/>

    <link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet" />
    <link th:href="@{/css/plugins/toastr/toastr.min.css}" rel="stylesheet" />

    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <style>
        .btn-custom {
            margin-bottom: 5px;
            margin-top: 22px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div th:include="common/navbar_left :: navbar_left"></div>
    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom" th:include="common/navbar_header :: navbar_header"></div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>Job Information</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li class="active">
                        <strong>Job Information</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <form method="post" th:action="@{/jobs/search}">
                                <div class="row">
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="p_id">Position ID</label>
                                            <input type="text" id="p_id" name="Pid" th:value="${position.pId}"
                                                   placeholder="Position ID" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="title">Title</label>
                                            <input type="text" id="title" name="title" th:value="${position.title}"
                                                   placeholder="Title" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="location">Location</label>
                                            <input type="text" id="location" name="location" th:value="${position.location}"
                                                   placeholder="Location" class="form-control"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="salary">Salary</label>
                                            <input type="text" id="salary" name="salary" th:value="${position.salary}"
                                                   placeholder="Salary" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="remajor">Major Requirement</label>
                                            <input type="text" id="remajor" name="remajor" th:value="${position.remajor}"
                                                   placeholder="Major Requirement" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="redegree">Degree Requirement</label>
                                            <input type="text" id="redegree" name="redegree" th:value="${position.redegree}"
                                                   placeholder="Degree Requirement" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-custom">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>Job List</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content" style="">
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Position ID</th>
                                    <th>Title</th>
                                    <th>Location</th>
                                    <th>Salary</th>
                                    <th>Major Requirement</th>
                                    <th>Degree Requirement</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="p,index: ${positionList}">
                                    <td class="col-md-1" th:text="${index.index} + 1"></td>
                                    <td class="col-md-1" th:text="${p.pId}"></td>
                                    <td class="col-md-2" th:text="${p.title}"></td>
                                    <td class="col-md-2" th:text="${p.location}"></td>
                                    <td class="col-md-1" th:text="${p.salary}"></td>
                                    <td class="col-md-1" th:text="${p.remajor}"></td>
                                    <td class="col-md-1" th:text="${p.redegree}"></td>
                                    <td class="col-md-2">
                                        <a th:href="@{/jobs/detail(pId = ${p.pId})}"><i class="fa fa-check text-navy">Detail</i></a>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        <a th:onclick="'sendMsg(\''+ ${p.pId} +'\',\''+${p.cId}+'\')'"
                                           th:if="${session.user_flag} == '0'">
                                            <i class="fa fa-check text-navy"><span>Apply</span></i>
                                        </a>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <a data-toggle="modal" data-target="#myModal5"
                                           th:onclick="'showFriends(\''+ ${p.pId} +'\')'" th:if="${session.user_flag} == '0'">
                                            <i class="fa fa-check text-navy"><span>Forward</span></i>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Forward</h4>
                        <small class="font-bold">Select a friend to forward.</small>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="position-id" name="positionId" />
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>User ID</th>
                                <th>User Name</th>
                                <th>Email</th>
                            </tr>
                            </thead>
                            <tbody id="friend-table-body">

                            </tbody>
                        </table>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                        <button type="button" th:onclick="'forward()'"  class="btn btn-primary">Forward</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div>
                <strong>Copyright</strong> Jobster &copy; 2018
            </div>
        </div>

    </div>
</div>
<!-- Mainly scripts -->
<div th:include="common/common_js :: common_js"></div>

<!-- Custom and plugin javascript -->
<script th:src="@{/js/inspinia.js}"></script>
<script th:src="@{/js/plugins/pace/pace.min.js}"></script>

<script th:src="@{/js/plugins/iCheck/icheck.min.js}"></script>

<script th:src="@{/js/plugins/toastr/toastr.min.js}"></script>

<script th:inline="javascript" type="text/javascript">
    //<![CDATA[
    $(function () {

    });
    var basePath =[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    function sendMsg(pId,cId){
        $.ajax({
            url : basePath +"/message/apply/job",
            type : "GET",
            contentType: "application/json;charset=utf-8",
            data : {'pId':pId,'cId':cId},
            dataType : "json",
            success : function(result) {
                if (result.success) {
                    toastr.success(result.respMessage);
                }else{
                    toastr.error(result.respMessage);
                }
            },
            error:function(msg){
                console.info(msg);
                toastr.warn(msg);
            }
        })
    }

    function showFriends(pId){
        $('#position-id').val(pId);
        $.ajax({
            url : basePath +"/student/toggle/list",
            type : "GET",
            contentType: "application/json;charset=utf-8",
            dataType : "json",
            success : function(result) {
                var obj = result.result;
                var body = "";
                $("#friend-table-body").html("");
                for( var i = 0 ;i < obj.length; i++){
                    body +=  '<tr><th><input type="checkbox" class="col-md-1 i-checks" name="checks" value="'+obj[i].sId+'"/></th>';
                    body +=  '<td class="col-md-3">'+obj[i].sId+'</td>';
                    body +=  '<td class="col-md-3">'+obj[i].name+'</td>';
                    body +=  '<td class="col-md-3">'+obj[i].email+'</td>';
                    body += "</tr>";
                }
                $("#friend-table-body").html(body);
            },
            error:function(msg){
                console.info(msg);
                toastr.warn(msg);
            }
        })
    }

    function forward(){
        var friendIdList = $("input[name='checks']:checked");
        var checkBoxValue = "";
        friendIdList.each(function(){
            checkBoxValue += $(this).val()+",";
        });
        checkBoxValue = checkBoxValue.substring(0,checkBoxValue.length-1);
        var pId = $('#position-id').val();
        if (checkBoxValue === "") {
            toastr.error("Please choose at least a friend !");
            return;
        }

        $.ajax({
            url : basePath +"/message/forward/job",
            type : "GET",
            contentType: "application/json;charset=utf-8",
            data : {'pId':pId,'friendIdList':checkBoxValue},
            dataType : "json",
            success : function(result) {
                if (result.success) {
                    toastr.success(result.respMessage);
                }else{
                    toastr.error(result.respMessage);
                }
            },
            error:function(msg){
                console.info(msg);
                toastr.warn(msg);
            }
        })
    }

    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-top-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "7000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }
    //]]>
</script>

</body>
</html>
